<template>

    <div style=" margin-left: 5%; margin-top: 2%;">
        <h2 style="text-align: left;margin-bottom: 40px;">产品类别编辑</h2>
        <el-divider></el-divider>
        <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="类别编号:" prop="CategoryCode" style="text-align: left;">
                <el-input v-model="form.categoryCode" readonly placeholder="可不填写,自动生成" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item label="类别名称:" prop="CategoryName" style="text-align: left;">
                <el-input v-model="form.categoryName" placeholder="全部" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item label="上级类别:" prop="SuperiorTId" style="text-align: left;">
                <el-select v-model="form.superiorTId" clearable placeholder="请选择" style="width: 500px;">
                    <el-option label="-" :value="0"></el-option>
                    <el-option v-for="item in options" :key="item.id" :label="item.categoryName" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注:" prop="Remarks" style="text-align: left;">
                <el-input v-model="form.remarks" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item style="text-align: left;">
                <el-button type="primary" @click="submitForm('ruleForm')">编辑</el-button>
                <el-button @click="back()">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { BindCategoryApi, GetCategoryByIdApi,UpdateCategoryApi } from "@/api/BasicsDatumServer/Category";
export default {
    data() {
        return {
            // 表单数据
            form: {
                categoryCode: "",
                categoryName: "",
                superiorTId: "",
                remarks: ""
            },
            // 选项
            options: [],
            // 校验规则
            rules: {
                
            }
        }
    },
    methods: {
        //提交表单
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //获取表单数据
                    var parms = {
                        id: this.$route.query.id,
                        categoryCode: this.form.categoryCode,
                        categoryName: this.form.categoryName,
                        speriorTId: this.form.superiorTId,
                        remarks: this.form.remarks
                    }
                    console.log(parms);
                    //调用添加分类接口
                    UpdateCategoryApi(parms).then(
                        (res) => {
                            if (res.data.code == 0) {
                                //添加成功，跳转到列表页面
                                this.$message.success("修改成功");
                                //跳转到列表页面
                                this.$router.push("CategoryList");
                            } else {
                                //添加失败
                                this.$message.error("添加失败");
                            }
                        },
                        (err) => {
                            console.error(err);
                        }
                    );
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //返回列表页面
        back() {
            //跳转到列表页面
            this.$router.push("CategoryList");
        },
        //获取分类列表
        getCategoryList() {
            //调用绑定分类接口
            BindCategoryApi().then(
                (res) => {
                    //获取分类列表数据
                    this.options = res.data.data;
                },
                (err) => {
                    console.error(err);
                }
            );
        },

        getCategory() {
            var parms = {
                id: this.$route.query.id
            }
            GetCategoryByIdApi(parms).then(
                (res) => {
                    this.form = res.data.data;

                },
                (err) => {
                    console.error(err);
                }
            );

        }
    },
    created() {
        
        this.getCategory();
        // 调用获取分类列表的方法
        this.getCategoryList();
    },
}
</script>
<style></style>